import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { Button, Col, Row, Timeline, Descriptions,Card } from 'antd';
import {routerRedux} from "react-router-dom";
import moment from 'moment';
import PropTypes from 'prop-types';
import { getDicByKey} from '@/support/common';
import Ellipsis from '../../../components/Ellipsis';
import './log.less';

// const FormItem = Form.Item;
const tempHash3 = {  // 连接平台下发控制指令 ---步骤三
    protocolVersion: '协议版本号',
    vin: '设备vin码',
    vinTag: '设备vin标识',
    messageId: '消息ID',
    serviceType: '服务类型',
    messageType: '消息类型',
    timeStamp: '消息发送时间',
    messageProtocolVersion: '消息版本号',
    contentSize: '数据长度',
    remoteDoorCommand: {  //控制四门指令体
      label: '远程控制车门',
      0: '四门上锁',
      1: '四门解锁',
    },
    remoteACMode: {  // 控制空调指令体
      label: '远程设置空调运行模式',
      0: '自动模式',
      1: '除霜模式',
      2: '最大制热模式',
      3: '最低制冷模式',
      4: '手动模式',
      5: '关闭'
    },
    remoteACTemperatureTarget: '目标温度',
    remoteACWorkingTime: '空调运行时间', 
    remoteACTemperatureGears: '温度档位(手动空调)',
    remoteACWindGears: '风量档位(手动空调)',
    remoteACRunMode: {
      label: '模式状态(手动空调)',
      0: '关闭',
      1: '吹脸模式',
      2: '吹脸/吹脚模式',
      3: '吹脚',
      4: '吹脚/除雾模式',
      5: '除霜模式',
      6: '预留',
      7: '预留'
    },
    remoteACAreFlowMode: {
      label: '进气模式(手动空调)',
      0: '外循环',
      1: '内循环',
    },
    remoteACAreCompressorStatus: {
      label: '压缩机请求(手动空调)',
      0: '关闭',
      1: '开启',
    },
    leftFrontWindowCommand: { // 控制车窗
      label: '远程控制左前车窗',
      0: '关闭',
      1: '打开',
      2: '留缝'
    },
    rightFrontWindowCommand: { 
      label: '远程控制右前车窗 ',
      0: '关闭',
      1: '打开',
      2: '留缝'
    },
    leftRearWindowCommand: { 
      label: '程控制左后车窗',
      0: '关闭',
      1: '打开',
      2: '留缝'
    },
    rightRearWindowCommand: { 
      label: '远程控制右后车窗',
      0: '关闭',
      1: '打开',
      2: '留缝'
    },
    remoteSunroofCommand: { // 控制天窗
      label: '远程控制前天窗',
      0: '完全关闭天窗',
      1: '完全打开天窗',
    },
    remoteSunroof2Command: { 
      label: '远程控制后天窗',
      0: '完全关闭天窗',
      1: '完全打开天窗',
    },
    remoteDangerWarningLampCommand: { // 一键寻车
      label: '控制危险警报灯',
      0: '关闭',
      1: '开启',
    },
    remoteCarHornsCommand: {
      label: '控制鸣笛',
      0: '关闭',
      1: '开启',
    },
    fastChargeCoverLampCommand: {  // 控制充电盖
      label: '远程控制快充充电盖 ',
      0: '关闭（预留）',
      1: '打开',
    },
    slowChargeCoverLampCommand: { 
      label: '远程控制慢充充电盖',
      0: '关闭（预留）',
      1: '打开',
    },
    chargeCoverLampCommand: { 
      label: '远程控制充电盖灯 ',
      0: '关闭（预留）',
      1: '打开',
    },
    remoteLightCommand: {  // 控制近光灯
      label: '远程控制近光灯 ',
      0: '关闭',
      1: '打开',
    },
    // remoteDangerWarningLampCommand: {  // 控制报警灯  --上面一键寻车中存在该信号，已列举
    //   label: '远程控制报警灯 ',
    //   0: '关闭',
    //   1: '打开',
    // },
    remoteTrunkCommand: {  // 控制后备箱
      label: '远程控制后备箱 ',
      0: '关闭',
      1: '打开',
    },
    // remoteCarHornsCommand: {  // 控制鸣笛   --一键寻车中存在该信号，已列举
    //   label: '远程控制鸣笛 ',
    //   0: '关闭',
    //   1: '打开',
    // },
    sentinelCommand: {  // 控制哨兵模式
      label: '远程控制哨兵模式 ',
      0: '进入哨兵模式——车内视频',
      1: '进入哨兵模式——车前视频',
      2: '进入哨兵模式——车后视频',
      3: '进入哨兵模式——车左视频',
      4: '进入哨兵模式——车右视频',
      5: '退出哨兵模式'
    },
    intelligentChargeCommand: {  // 远程控制引擎
      label: '远程控制引擎 ',
      0: '关闭',
      1: '开启',
    },
    remoteChargeCommand: {  // 远程控制充电
      label: '远程控制充电 ',
      0: '停止充电',
    },
    no1SeatHeatingCommand: {  // 远程控制座椅
      label: '远程控制座椅1 ',
      0: '关闭',
      1: '低档(加热)',
      2: '中档(加热)',
      3: '高档(加热)',
      4: '低档(通风)',
      5: '中档(通风)',
      6: '高档(通风)'
    },
    no2SeatHeatingCommand: {  
      label: '远程控制座椅2 ',
      0: '关闭',
      1: '低档(加热)',
      2: '中档(加热)',
      3: '高档(加热)',
      4: '低档(通风)',
      5: '中档(通风)',
      6: '高档(通风)'
    },
    no3SeatHeatingCommand: {  
      label: '远程控制座椅3 ',
      0: '关闭',
      1: '低档(加热)',
      2: '中档(加热)',
      3: '高档(加热)',
      4: '低档(通风)',
      5: '中档(通风)',
      6: '高档(通风)'
    },
    no4SeatHeatingCommand: {  
      label: '远程控制座椅4 ',
      0: '关闭',
      1: '低档(加热)',
      2: '中档(加热)',
      3: '高档(加热)',
      4: '低档(通风)',
      5: '中档(通风)',
      6: '高档(通风)'
    },
    no5SeatHeatingCommand: {  
      label: '远程控制座椅5 ',
      0: '关闭',
      1: '低档(加热)',
      2: '中档(加热)',
      3: '高档(加热)',
      4: '低档(通风)',
      5: '中档(通风)',
      6: '高档(通风)'
    },
    no6SeatHeatingCommand: {  
      label: '远程控制座椅6 ',
      0: '关闭',
      1: '低档(加热)',
      2: '中档(加热)',
      3: '高档(加热)',
      4: '低档(通风)',
      5: '中档(通风)',
      6: '高档(通风)'
    },
    no7SeatHeatingCommand: {  
      label: '远程控制座椅7 ',
      0: '关闭',
      1: '低档(加热)',
      2: '中档(加热)',
      3: '高档(加热)',
      4: '低档(通风)',
      5: '中档(通风)',
      6: '高档(通风)'
    },
    seatHeatingTime: '运行时间',
    // 控制一键制冷/温暖  指令体中字段已在控制座椅及控制空调中列举
    // 通用配置查询无控制指令
    uniquePipelineNumber: '唯一流水号', // 金融授信车状态查询
    deviceId: '车辆VIN',
    // 车辆状态查询无控制指令
    serialNumber: '唯一流水号',
    bodyHexStr: '原始报文',
}
const tempHash4 = { // TBOX回复指令ACK ---步骤四
  protocolVersion: '协议版本号',
  vin: '设备vin码',
  vinTag: '设备vin标识',
  messageId: '消息ID',
  serviceType: '服务类型',
  messageType: '消息类型',
  timeStamp: '消息发送时间',
  messageProtocolVersion: '消息版本号',
  contentSize: '数据长度',
  status: {
    label: '状态',
      0: '成功',
      1: '失败',
  },
  uniquePipelineNumber: '唯一流水号',
  bodyHexStr: '原始报文'
}
const tempHash6 = { // TBOX回复执行结果 ---步骤六  缺少 远控整车状态字段
  protocolVersion: '协议版本号',
  vin: '设备vin码',
  vinTag: '设备vin标识',
  messageId: '消息ID',
  serviceType: '服务类型',
  messageType: '消息类型',
  timeStamp: '消息发送时间',
  messageProtocolVersion: '消息版本号',
  contentSize: '数据长度',
  remoteDoorResult: { // 控制四门
    label: '控制车门结果',
    0: '车门解锁成功',
    1: '车门闭锁成功',
    2: '车门解锁失败',
    3: '车门闭锁失败',
    4: '车门已解锁(解锁状态下解锁)',
    5: '车门已闭锁(闭锁状态下闭锁)'
  },
  remoteDoorErrorList: '控制车门错误码',

  // 空调运行模式设置结果 -- remoteACResult
  remoteACResultAuto: {  // 控制空调
    label: '自动空调控制',
    0: '自动模式开启成功',
    1: '除雾模式开启成功',
    2: '最大制热模式开启成功',
    3: '最大制冷模式开启成功',
    4: '关闭空调成功',
    5: '打开空调失败',
    6: '关闭空调失败',
    7:  '自动模式已开启（开启状态下开启）',
    8: '除雾模式已开启（开启状态下开启）',
    9: '最大制热模式已开启（开启状态下开启）',
    10: '最大制冷模式已开启（开启状态下开启）',
    11: '空调已关闭（关闭情况下关闭）',
    12: '自动关闭成功',
    13: '自动关闭失败'
  },
  remoteACResultManual: {
    label: '手动空调控制',
    0: '开启成功',
    1: '关闭成功',
    2: '开启失败',
    3: '关闭失败',
    12: '空调已开启(开启状态下开启)',
    13: '空调已关闭(关闭状态下关闭)'
  },
  remoteACErrorList: '远控空调错误码',
  leftFrontWindowResult: { // 控制车窗
    label: '控制左前车窗结果',
    0: '车窗开启成功',
    1: '车窗关闭成功',
    2: '车窗开启失败',
    3: '车窗关闭失败',
    4: '车窗已开启(开启状态下开启)',
    5: '车窗已关闭(关闭状态下关闭)',
    6: '车窗留缝成功',
    7: '车窗留缝失败',
    8: '车窗留缝已开启(开启状态下开启)'
  },
  rightFrontWindowResult: {
    label: '控制右前车窗结果',
    0: '车窗开启成功',
    1: '车窗关闭成功',
    2: '车窗开启失败',
    3: '车窗关闭失败',
    4: '车窗已开启(开启状态下开启)',
    5: '车窗已关闭(关闭状态下关闭)',
    6: '车窗留缝成功',
    7: '车窗留缝失败',
    8: '车窗留缝已开启(开启状态下开启)'
  },
  leftRearWindowResult: { 
    label: '控制左后车窗结果',
    0: '车窗开启成功',
    1: '车窗关闭成功',
    2: '车窗开启失败',
    3: '车窗关闭失败',
    4: '车窗已开启(开启状态下开启)',
    5: '车窗已关闭(关闭状态下关闭)',
    6: '车窗留缝成功',
    7: '车窗留缝失败',
    8: '车窗留缝已开启(开启状态下开启)'
  },
  rightRearWindowResult: { 
    label: '控制右后车窗结果',
    0: '车窗开启成功',
    1: '车窗关闭成功',
    2: '车窗开启失败',
    3: '车窗关闭失败',
    4: '车窗已开启(开启状态下开启)',
    5: '车窗已关闭(关闭状态下关闭)',
    6: '车窗留缝成功',
    7: '车窗留缝失败',
    8: '车窗留缝已开启(开启状态下开启)'
  },
  leftFrontWindowErrorList: '控制左前车窗错误码',
  rightFrontWindowErrorList: '控制右前车窗错误码',
  leftRearWindowErrorList: '控制左后车窗错误码',
  rightRearWindowErrorList: '控制右后车窗错误码',
  remoteSunroofResult: {
    label: '控制前天窗结果',
    0: '关闭天窗成功',
    1: '关闭天窗失败',
    2: '开启天窗成功',
    3: '开启天窗失败',
    4: '天窗已开启(开启状态下开启)',
    5: '天窗已关闭(关闭状态下关闭)',
  },
  remoteSunroofErrorList: '控制前天窗错误码',
  remoteSunroof2Result : {
    label: '控制后天窗结果',
    0: '关闭天窗成功',
    1: '关闭天窗失败',
    2: '开启天窗成功',
    3: '开启天窗失败',
    4: '天窗已开启(开启状态下开启)',
    5: '天窗已关闭(关闭状态下关闭)',
  },
  remoteSunroof2ErrorList: '控制后天窗错误码',
  remoteFastChargePortResult : {
    label: '控制快充电盖结果',
    0: '关闭充电盖失败',
    1: '关闭充电盖成功',
    2: '打开充电盖成功',
    3: '打开充电盖失败',
  },
  remoteFastChargePortErrorList: '控制快充电盖错误码',
  remoteSlowChargePortResult : {
    label: '控制慢充电盖结果',
    0: '关闭充电盖失败',
    1: '关闭充电盖成功',
    2: '打开充电盖成功',
    3: '打开充电盖失败',
  },
  remoteSlowChargePortErrorList: '控制慢充电盖错误码',
  remoteChargePortResult : {
    label: '控制充电盖结果',
    0: '关闭充电盖失败',
    1: '关闭充电盖成功',
    2: '打开充电盖成功',
    3: '打开充电盖失败',
  },
  remoteChargePortErrorList: '控制充电盖错误码',
  remoteLightResult : {
    label: '控制近光灯结果',
    0: '关闭灯光成功',
    1: '关闭灯光失败',
    2: '开启日行灯成功',
    3: '关闭日行灯失败',
    4: '开启近光灯成功',
    5: '开启近光灯失败',
    6: '开启远光灯成功',
    7: '开启远光灯失败',
    8: '灯光已关闭(关闭状态下关闭)',
    9: '日行灯已开启(开启状态下开启)',
    10: '近光灯已开启(开启状态下开启)',
    11: '远光灯已开启(开启状态下开启)'
  },
  remoteLightErrorList: '控制近光灯错误码',
  remoteDangerWarningLampResult : {
    label: '控制危险警报灯结果',
    0: '关闭危险报警灯成功',
    1: '关闭危险报警灯失败',
    2: '开启危险报警灯成功',
    3: '开启危险报警灯失败',
    4: '危险报警灯已开启(开启状态下开启)',
    5: '危险报警灯已关闭(关闭状态下关闭)'
  },
  remoteDangerWarningLampErrorList: '控制危险警报灯错误码',
  emoteTrunkResult : {
    label: '控制后备箱结果',
    0: '关闭后备箱成功',
    1: '关闭后备箱失败',
    2: '开启后备箱成功',
    3: '开启后备箱灯失败',
    4: '后备箱已开启(开启状态下开启)',
    5: '危后备箱已关闭(关闭状态下关闭)'
  },
  remoteTrunkErrorList: '控制后备箱错误码',
  remoteCarHornsResult : {
    label: '控制鸣笛结果',
    0: '关闭成功',
    1: '关闭失败',
    2: '开启成功',
    3: '开启失败',
  },
  remoteCarHornsErrorList: '控制鸣笛错误码',
  remoteSentinelModeResult : {
    label: '控制哨兵模式结果',
    0: '系统电源状态不为OFF，进入失败',
    1: '蓄电池电压＜12.7V，进入失败',
    2: 'IVI无响应，进入失败',
    3: 'HAD无响应，进入失败（暂未用到）',
    4: 'IVI无响应，退出失败',
    5: 'HAD无响应，退出失败（暂未用到）'
  },
  remoteSentinelModeErrorList: '控制哨兵模式错误码',
  engineResult : {
    label: '控制引擎结果',
    0: '开启成功',
    1: '开启失败',
    2: '关闭成功',
    3: '关闭失败',
  },
  engineErrorList: '控制引擎错误码',
  remoteStopChargeResult : {
    label: '控制停止充电结果',
    0: '停止充电成功',
    1: '停止充电失败',
  },
  remoteStopChargeErrorList: '控制停止充电错误码',
  no1SeatHeatingResult : {
    label: '远程控制座椅1结果',
    0: '关闭座椅加热成功',
    1: '关闭座椅加热失败',
    2: '开启座椅加热成功',
    3: '开启座椅加热失败',
    4: '座椅加热已开启(开启状态下开启)',
    5: '座椅加热已关闭(关闭状态下关闭)',
    6: '自动关闭成功',
    7: '自动关闭失败'
  },
  no1SeatHeatingErrorList: '控制座椅1加热错误码',
  no2SeatHeatingResult : {
    label: '远程控制座椅2结果',
    0: '关闭座椅加热成功',
    1: '关闭座椅加热失败',
    2: '开启座椅加热成功',
    3: '开启座椅加热失败',
    4: '座椅加热已开启(开启状态下开启)',
    5: '座椅加热已关闭(关闭状态下关闭)',
    6: '自动关闭成功',
    7: '自动关闭失败'
  },
  no2SeatHeatingErrorList: '控制座椅2加热错误码',
  no3SeatHeatingResult : {
    label: '远程控制座椅3结果',
    0: '关闭座椅加热成功',
    1: '关闭座椅加热失败',
    2: '开启座椅加热成功',
    3: '开启座椅加热失败',
    4: '座椅加热已开启(开启状态下开启)',
    5: '座椅加热已关闭(关闭状态下关闭)',
    6: '自动关闭成功',
    7: '自动关闭失败'
  },
  no3SeatHeatingErrorList: '控制座椅3加热错误码',
  no4SeatHeatingResult : {
    label: '远程控制座椅4结果',
    0: '关闭座椅加热成功',
    1: '关闭座椅加热失败',
    2: '开启座椅加热成功',
    3: '开启座椅加热失败',
    4: '座椅加热已开启(开启状态下开启)',
    5: '座椅加热已关闭(关闭状态下关闭)',
    6: '自动关闭成功',
    7: '自动关闭失败'
  },
  no4SeatHeatingErrorList: '控制座椅4加热错误码',
  no5SeatHeatingResult : {
    label: '远程控制座椅5结果',
    0: '关闭座椅加热成功',
    1: '关闭座椅加热失败',
    2: '开启座椅加热成功',
    3: '开启座椅加热失败',
    4: '座椅加热已开启(开启状态下开启)',
    5: '座椅加热已关闭(关闭状态下关闭)',
    6: '自动关闭成功',
    7: '自动关闭失败'
  },
  no5SeatHeatingErrorList: '控制座椅5加热错误码',
  no6SeatHeatingResult : {
    label: '远程控制座椅6结果',
    0: '关闭座椅加热成功',
    1: '关闭座椅加热失败',
    2: '开启座椅加热成功',
    3: '开启座椅加热失败',
    4: '座椅加热已开启(开启状态下开启)',
    5: '座椅加热已关闭(关闭状态下关闭)',
    6: '自动关闭成功',
    7: '自动关闭失败'
  },
  no6SeatHeatingErrorList: '控制座椅6加热错误码',
  no7SeatHeatingResult : {
    label: '远程控制座椅7结果',
    0: '关闭座椅加热成功',
    1: '关闭座椅加热失败',
    2: '开启座椅加热成功',
    3: '开启座椅加热失败',
    4: '座椅加热已开启(开启状态下开启)',
    5: '座椅加热已关闭(关闭状态下关闭)',
    6: '自动关闭成功',
    7: '自动关闭失败'
  },
  no7SeatHeatingErrorList: '控制座椅7加热错误码',
  vehiclePermissionStatus: {
    label: '金融授信车用户权限状态',
    0: '非授信状态(出厂)',
    1: '授信车状态',
    2: '授信功能关闭',
    3: '需配置变更',
  },
  vehicleConfigStatus: {
    label: '金融授信车配置状态',
    0: '车辆可启动模式',
    1: '授信不可启动模式',
    2: '无需配置变更',
  },
  vehicleStatusForBCM: {
    label: 'BCM授信状态(防拆)',
    0: '非授信状态',
    1: '授信车状态',
  },
  vehicleConfigForBCM: {
    label: 'BCM金融授信车配置状态',
    0: '车辆可启动模式',
    1: '授信不可启动模式',
  },
  gpsStatus: {
    label: 'GPS状态定位状态',
    0: '当前值',
    1: '最后一次有效位置',
  },
  longitude: '经度',
  latitude: '纬度',
  vehicleLimpEnable: {
    label: '"是否支持跛行',
    0: '不支持',
    1: '支持',
  },
  vehicleLimpStatus: {
    label: '"跛行状态',
    0: '跛行解除',
    1: '跛行激活',
  },
  // vhlStatusAvailable: '车辆状态可用状态',
  vhlStatusAvailable: {
    label: '车辆状态可用状态',
    0: '可用',
    1: '不可用',
  },
  leftFrontDoorStatus: {
    label: '左前车门状态',
    0: '关闭',
    1: '打开',
  },
  rightFrontDoorStatus: {
    label: '右前车门状态',
    0: '关闭',
    1: '打开',
  },
  leftRearDoorStatus: {
    label: '左后车门状态',
    0: '关闭',
    1: '打开',
  },
  rightRearDoorStatus: {
    label: '右后车门状态',
    0: '关闭',
    1: '打开',
  },
  doorLockState: {
    label: '驾驶员侧锁状态',
    0: '关闭',
    1: '打开',
  },
  acState: {
    label: '空调运行状态（自动）',
    0: '关闭',
    1: '自动模式运行',
    2: '除霜模式运行',
    3: '最大制热模式运行',
    4: '最大制冷模式运行',
    5: '本地模式运行',
    6: '其他情况',
    7: '预留'
  },
  acTemperature: '当前车内温度',
  acTemperatureGears: '空调运行温度档位(手动空调)',
  acWindGears: '空调运行风量档位(手动空调)',
  acRunMode: {
    label: '空调运行模式(手动空调) ',
    0: '关闭',
    1: '吹脸模式',
    2: '吹脸/吹脚模式',
    3: '吹脚',
    4: '吹脚/除雾模式',
    5: '除雾模式',
    6: '预留',
    7: '预留'
  },
  acAreFlowMode: {
    label: '空调运行进气模式(手动空调) ',
    0: '内循环',
    1: '外循环',
  },
  acAreCompressorStatus: {
    label: '空调运行压缩机状态(手动空调) ',
    0: '关闭',
    1: '运行',
  },
  leftFrontWindowStatus: {
    label: '左前车窗远程控制结果',
    0: '关闭',
    1: '打开',
    2: '留缝'
  },
  rightFrontWindowStatus: {
    label: '右前车窗远程控制结果',
    0: '关闭',
    1: '打开',
    2: '留缝'
  },
  leftRearWindowStatus: {
    label: '左后车窗远程控制结果',
    0: '关闭',
    1: '打开',
    2: '留缝'
  },
  rightRearWindowStatus: {
    label: '右后车窗远程控制结果',
    0: '关闭',
    1: '打开',
    2: '留缝'
  },
  remoteSunroofStatus: {
    label: '天窗控制状态',
    0: '关闭',
    1: '打开',
  },
  remoteLightStatus: {
    label: '车灯控制状态',
    0: '关闭',
    1: '日光灯状态',
    2: '近光灯状态',
    3: '远光灯状态'
  },
  remoteDangerWarningLamp_Status: {
    label: '危险报警灯状态',
    0: '关闭',
    1: '打开',
  },
  no1SeatHeatingStatus: {
    label: '主驾座椅加热状态',
    0: '关闭',
    1: '低',
    2: '中',
    3: '高'
  },
  no2SeatHeatingStatus: {
    label: '副驾座椅加热状态',
    0: '关闭',
    1: '低',
    2: '中',
    3: '高'
  },
  remoteTrunkStatus: {
    label: '后备箱状态',
    0: '关闭',
    1: '打开',
  },
  remoteCarHornsStatus: {
    label: '鸣笛状态',
    0: '关闭',
    1: '打开',
  },
  engineStatus: {
    label: '电源档位状态',
    0: 'OFF档',
    1: 'ACC档',
    2: 'ON档',
    3: 'START档'
  },
  sentinelModeStatus: {
    label: '哨兵模式状态',
    0: '关闭',
    1: '打开',
  },
  remoteSunroof2Status: {
    label: '天窗状态（后天窗）',
    0: '关闭',
    1: '打开',
  },
  no3SeatHeatingStatus: {
    label: '3号座椅加热状态',
    0: '关闭',
    1: '低',
    2: '中',
    3: '高'
  },
  no4SeatHeatingStatus: {
    label: '4号座椅加热状态',
    0: '关闭',
    1: '低',
    2: '中',
    3: '高'
  },
  no5SeatHeatingStatus: {
    label: '5号座椅加热状态',
    0: '关闭',
    1: '低',
    2: '中',
    3: '高'
  },
  no6SeatHeatingStatus: {
    label: '6号座椅加热状态',
    0: '关闭',
    1: '低',
    2: '中',
    3: '高'
  },
  no7SeatHeatingStatus: {
    label: '7号座椅加热状态',
    0: '关闭',
    1: '低',
    2: '中',
    3: '高'
  },
  fastChargePortStatus: {
    label: '充电盖（快）状态',
    0: '关闭',
    1: '打开',
  },
  slowChargePortStatus: {
    label: '充电盖（慢）状态',
    0: '关闭',
    1: '打开',
  },
  chargePortStatus: {
    label: '充电盖状态',
    0: '关闭',
    1: '打开',
  },
  chargeState: {
    label: '充电状态',
    0: '停止充电',
    1: '正在充电',
  },
  engineState: {
    label: '引擎状态',
    0: '关闭',
    1: '打开',
  },
  uniquePipelineNumber: '唯一流水号',
  bodyHexStr: '原始报文'
}
const mapStateToProps = (state: any) => ({
    remoteController: state.remoteController,
    loading: state.loading.effects['remoteController/getFetchPage'],
});
class RemoteControllerLogQueryDetail extends PureComponent<any, any> {
  static contextTypes = {
    authButton: PropTypes.array,
    dicData: PropTypes.array,
  };

    state = {
       show1: true,
       show2: false,
       show3: false,
       show4: false,
       show5: false,
       show6: false,
       show7: false,
       bgColor1: "#F8F8FF",
       bgColor2: "",
       bgColor3: "",
       bgColor4: "",
       bgColor5: "",
       bgColor6: "",
       bgColor7: "",
       detailData: JSON.parse(sessionStorage.getItem('detailData') || '{}'),
       colorData: JSON.parse(sessionStorage.getItem('colorData') || '{}'),
       dcvpRequest : {},
       tboxAck : {},
       dcvpAck : {},
       tboxResult : {},
       dcvpResult:{}

      };

      componentWillUnmount () {
        sessionStorage.removeItem("detailData");
        sessionStorage.removeItem("colorData");
      }
    close = () => {
        const { closeModal } = this.props;
        closeModal();
        this.setState({
            show1: true,
            show2: false,
            show3: false,
            show4: false,
            show5: false,
            show6: false,
            show7: false,
            bgColor1: "#F8F8FF",
            bgColor2: "",
            bgColor3: "",
            bgColor4: "",
            bgColor5: "",
            bgColor6: "",
            bgColor7: "",
        })
    }
    goBack = () => {
        this.setState({
            show1: true,
            show2: false,
            show3: false,
            show4: false,
            show5: false,
            show6: false,
            show7: false,
            bgColor1: "#F8F8FF",
            bgColor2: "",
            bgColor3: "",
            bgColor4: "",
            bgColor5: "",
            bgColor6: "",
            bgColor7: "",
        })
        const { dispatch } = this.props;
        dispatch(routerRedux.push({ pathname: '/connectPlat/remoteControllerLogQuery', sourcePage: 'remoteControllerLogQueryDetail' }));
      }
    clc1 =() =>{
       console.log('点击了1')
       this.setState({
        show1: true,
        show2: false,
        show3: false,
        show4: false,
        show5: false,
        show6: false,
        show7: false,
        bgColor1: "#F8F8FF",
        bgColor2: "",
        bgColor3: "",
        bgColor4: "",
        bgColor5: "",
        bgColor6: "",
        bgColor7: "",
       })
    }
    clc2 =() =>{
        console.log('点击了2')
        this.setState({
         show1: false,
         show2: true,
         show3: false,
         show4: false,
         show5: false,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "#F8F8FF",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc3 =() =>{
        console.log('点击了3')
        this.setState({
         show1: false,
         show2: false,
         show3: true,
         show4: false,
         show5: false,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "#F8F8FF",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc4 =() =>{
        console.log('点击了4')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: true,
         show5: false,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "#F8F8FF",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc5 =() =>{
        console.log('点击了5')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: false,
         show5: true,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "#F8F8FF",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc6 =() =>{
        console.log('点击了6')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: false,
         show5: false,
         show6: true,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "#F8F8FF",
         bgColor7: "",
        })
     }
     clc7 =() =>{
        console.log('点击了7')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: false,
         show5: false,
         show6: false,
         show7: true,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "#F8F8FF",
        })
     }
      // 格式化json数据
      format(str: any){
        var stack = []; //栈-用于括号匹配
        var tmpStr = '';    //新格式化JSON字符串
        var len = Object.keys(str).length;   //原始JSON长度
        //遍历每一个字符
        for (let i = 0; i < len; i++) {
          //当遇到结构块起始结构
          if (str[i] == '{' || str[i] === '[') {
            //起始结构后面直接换行
            tmpStr += str[i] + "\n";
            //入栈
            stack.push(str[i]);
            //这里的意思是结构块起始的下一行开始就会有一个缩进，缩进量与遇到的结构块起始符个数成正比1:1
            tmpStr += "\t".repeat(stack.length);
          }
          //当遇到结构块结束符
          else if (str[i] == ']' || str[i] === '}') {
            //因为本身JSON格式是固定的，所以括号一定是成对的，这里先不考虑错误的json数据
            //遇到结束符就退栈，
            stack.pop();
            //结束符本身输出到下一行，并减少一个缩进
            tmpStr += "\n"+"\t".repeat(stack.length) + str[i];
          }
          //当遇到逗号的时候
          else if (str[i] == ',') {
            //逗号后方直接换行，以及下一行的缩进处理
            tmpStr += str[i] + "\n" + "\t".repeat(stack.length);
          }
          else {
            //其他字符直接复制
            tmpStr += str[i];
          }
        }
        return tmpStr;
      }
    render() {
        const {colorData:{color1, color2,color3,color4,color5,color6,color7}, detailData} = this.state;
        console.log('detailData', detailData);
        // 获取后5个步骤的JSON数据，转换为json对象格式
        const dcvpRequest = detailData?.dcvpRequest !== null ? JSON.parse(detailData?.dcvpRequest) : {};
        const tboxAck = detailData?.tboxAck !== null ? JSON.parse(detailData?.tboxAck) : {};
        const dcvpAck = detailData?.dcvpAck !== null ? JSON.parse(detailData?.dcvpAck) : {};
        const tboxResult = detailData?.tboxResult !== null ? JSON.parse(detailData?.tboxResult) : {};
        const dcvpResult = detailData?.dcvpResult !== null ? JSON.parse(detailData?.dcvpResult) : {};
        // 请求参数格式处理
        const  requestParam =this.format(JSON.stringify(JSON.parse(detailData?.requestParam) || {}) || '') || '-';
        const  smsResult =this.format(JSON.stringify(JSON.parse(detailData?.smsResult) || {}) || '' ) || '-';
        const  dcvpAckData = this.format(JSON.stringify(dcvpAck?.data || {}) || '') || '-';
        const  dcvpResultData =this.format(JSON.stringify(dcvpResult?.data || {}) || '') || '-';
        console.log('requstParam', requestParam);
        console.log('paramtype', typeof(requestParam));
        console.log('smsResult', smsResult);
        console.log('dcvpAck', dcvpAckData);
        console.log('dcvpResultData', dcvpResultData);
        console.log('resulttype', typeof(dcvpResultData));
        // const  smsResult= JSON.stringify(JSON.parse(detailData?.smsResult), null, 4) || '-';
        // const  dcvpAckData= JSON.stringify(dcvpAck?.data, null, 4) || '-'; // 连接平台回复响应结果，连接层返回参数
        // const  dcvpResultData= JSON.stringify(dcvpResult?.data, null, 4) || '-'; // 回复远控结果
        
        console.log('dcvpRequest', dcvpRequest);
        console.log('tboxAck',tboxAck);
        console.log('dcvpAck',dcvpAck);
        console.log('tboxResult', tboxResult);
        console.log('dcvpResult', dcvpResult);
        // 处理步骤三--连接平台下发控制指令的数据
        const tempHash3Data = {
          ...dcvpRequest,
          ...dcvpRequest?.data?.header,
          ...dcvpRequest?.data?.body?.remoteDoor,
          ...dcvpRequest?.data?.body?.remoteAC,
          ...dcvpRequest?.data?.body?.serialNumber,
          ...dcvpRequest?.data?.body?.remoteWindows,
          ...dcvpRequest?.data?.body?.remoteSunroof,
          ...dcvpRequest?.data?.body?.findCar,
          ...dcvpRequest?.data?.body?.findCar?.remoteDangerWarningLamp,
          ...dcvpRequest?.data?.body?.findCar?.remoteCarHorns,
          ...dcvpRequest?.data?.body?.remoteChargeCoverLamp,
          ...dcvpRequest?.data?.body?.remoteLight,
          ...dcvpRequest?.data?.body?.remoteDangerWarningLamp,
          ...dcvpRequest?.data?.body?.remoteTrunk,
          ...dcvpRequest?.data?.body?.remoteCarHorns,
          ...dcvpRequest?.data?.body?.remoteSentinel,
          ...dcvpRequest?.data?.body?.remoteEngine,
          ...dcvpRequest?.data?.body?.remoteCharge,
          ...dcvpRequest?.data?.body?.remoteSeatHeating,
        };
        console.log('HashData', tempHash3Data);
        const itemList1 = Object.keys(tempHash3).map(key =>{
         if(key in tempHash3Data){ // 判断该key在真实数据中是否存在
             const bodyList =['remoteDoorCommand', 'remoteACMode', 'remoteACRunMode', 'remoteACAreFlowMode', 'remoteACAreCompressorStatus', 'leftFrontWindowCommand', 'rightFrontWindowCommand',
             'leftRearWindowCommand', 'rightRearWindowCommand', 'remoteSunroofCommand', 'remoteSunroof2Command', 'remoteDangerWarningLampCommand', 'remoteCarHornsCommand', 'fastChargeCoverLampCommand',
            'slowChargeCoverLampCommand', 'chargeCoverLampCommand', 'remoteLightCommand', 'remoteDangerWarningLampCommand', 'remoteTrunkCommand', 'remoteCarHornsCommand', 'sentinelCommand', 'intelligentChargeCommand',
             'remoteChargeCommand', 'no1SeatHeatingCommand', 'no2SeatHeatingCommand', 'no3SeatHeatingCommand', 'no4SeatHeatingCommand', 'no5SeatHeatingCommand', 'no6SeatHeatingCommand', 'no7SeatHeatingCommand'];
           if(bodyList.includes (key)){
          // if(key == 'remoteDoorCommand' || key == 'remoteACMode' || key == 'remoteACRunMode' || key == 'remoteACAreFlowMode' || key == 'remoteACAreCompressorStatus'){
            return {
              label: tempHash3[key].label,
              value: tempHash3[key][tempHash3Data[key]] || '-'
            }
           } else if(key == 'timeStamp'){
            return {
              label: tempHash3[key],
              value: moment(tempHash3Data[key]*1000).format("YYYY-MM-DD HH:mm:ss") || '-',
            }
           }
           else{
            return {
              label: tempHash3[key],
              value: tempHash3Data[key] || '-',
            }
           }
        }else{ // 真实数据中无该项数据则不展示
          // delete tempHash3[key];
          return null
          }
        })
        Object.keys(itemList1).forEach((key) =>{
          let value = itemList1[key];
          if(!value){
            delete itemList1[key];
          }
          return itemList1;
        })
        console.log('itemList1', itemList1);
       
      
          // 处理步骤四--tbox回复指令ACK
          const tempHash4Data = {
            ...tboxAck,
            ...tboxAck?.data?.header,
            ...tboxAck?.data?.body,
          };
          console.log('HashData4', tempHash4Data);
          const itemList4 = Object.keys(tempHash4).map(key =>{ 
            if(key in tempHash4Data){ // 判断该key在真实数据中是否存在
            if(key == 'status'){
              return {
                label: tempHash4[key].label,
                value: tempHash4[key][tempHash4Data[key]] || '-'
              }
             } else if(key == 'timeStamp'){
              return {
                label: tempHash4[key],
                value: moment(tempHash4Data[key]*1000).format("YYYY-MM-DD HH:mm:ss") || '-',
              }
             }
             else{
              return {
                label: tempHash4[key],
                value: tempHash4Data[key] || '-',
              }
             }
            }
            else{ // 真实数据中无该项数据则不展示
              // delete tempHash3[key];
              return null
              }
          })
          console.log('itemList4', itemList4);
          Object.keys(itemList4).forEach((key) =>{
            let value = itemList4[key];
            if(!value){
              delete itemList4[key];
            }
            return itemList4;
          })
          console.log('itemList4', itemList4);

           // 处理步骤六--tbox回复执行结果
        const tempHash6Data = {
          ... tboxResult,
          ...tboxResult?.data?.header,
          ...tboxResult?.data?.body?.remoteACResult,
          ...tboxResult?.data?.body?.otaAlert,
          ...tboxResult?.data?.body?.vhlCtlStatus,
          ...tboxResult?.data?.body?.remoteWindowsResult,
          ...tboxResult?.data?.body?.remoteSunroofResult,
          ...tboxResult?.data?.body?.remoteDangerWarningLampResult,
          ...tboxResult?.data?.body?.remoteCarHornsResult,
          ...tboxResult?.data?.body?.remoteChargePortResult,
          ...tboxResult?.data?.body?.remoteLightResult,
          ...tboxResult?.data?.body?.remoteDangerWarningLampResult,
          ...tboxResult?.data?.body?.emoteDangerWarningLampResult,
          ...tboxResult?.data?.body?.remoteTrunkResult,
          ...tboxResult?.data?.body?.remoteCarHornsResult,
          ...tboxResult?.data?.body?.remoteSentinelModeResult,
          ...tboxResult?.data?.body?.remoteEngineResult,
          ...tboxResult?.data?.body?.remoteChargeResult,
          ...tboxResult?.data?.body?.remoteSeatHeating,
          ...tboxResult?.data?.body?.remoteACResult,
          ...tboxResult?.data?.body?.remoteSeatHeating,
          ...tboxResult?.data?.body?.coordinates,
        };
        console.log('HashData6', tempHash6Data);
        console.log('tempHash6',tempHash6);
        const itemList6 = Object.keys(tempHash6).map(key =>{
         if(key in tempHash6Data){ // 判断该key在真实数据中是否存在
             const bodyList =['remoteDoorResult','vhlStatusAvailable', 'leftFrontDoorStatus', 'rightFrontDoorStatus', 'leftRearDoorStatus', 'rightRearDoorStatus', 'doorLockState',
            'acState', 'acRunMode', 'acAreFlowMode', 'acAreCompressorStatus', 'leftFrontWindowStatus', 'rightFrontWindowStatus', 'leftRearWindowStatus', 'rightRearWindowStatus', 'remoteSunroofStatus',
            'remoteLightStatus', 'remoteDangerWarningLamp_Status', 'no1SeatHeatingStatus', 'no2SeatHeatingStatus', 'remoteTrunkStatus', 'remoteCarHornsStatus', 'engineStatus','sentinelModeStatus',
            'remoteSunroof2Status', 'no3SeatHeatingStatus', 'no4SeatHeatingStatus', 'no5SeatHeatingStatus', 'no6SeatHeatingStatus', 'no7SeatHeatingStatus', 'fastChargePortStatus', 'slowChargePortStatus',
            'chargePortStatus', 'chargeState', 'engineState', 'leftFrontWindowResult', 'rightFrontWindowResult', 'leftRearWindowResult', 'rightRearWindowResult', 'remoteSunroofResult', 'remoteSunroof2Result',
            'remoteDangerWarningLampResult', 'remoteCarHornsResult', 'remoteFastChargePortResult', 'remoteSlowChargePortResult', 'remoteChargePortResult', 'remoteLightResult', 'remoteDangerWarningLampResult',
            'remoteTrunkResult', 'remoteCarHornsResult', 'remoteSentinelModeResult', 'engineResult', 'remoteStopChargeResult', 'no1SeatHeatingResult', 'no2SeatHeatingResult', 'no3SeatHeatingResult', 'no4SeatHeatingResult',
            'no51SeatHeatingResult', 'no6SeatHeatingResult', 'no7SeatHeatingResult', 'vehiclePermissionStatus', 'vehicleConfigStatus', 'vehicleStatusForBCM', 'vehicleConfigForBCM', 'gpsStatus',
            'vehicleLimpEnable', 'vehicleLimpStatus'];
           if(bodyList.includes (key)){
            return {
              label: tempHash6[key].label,
              value: tempHash6[key][tempHash6Data[key]] || '-'
            }
           } else if(key == 'timeStamp'){
            return {
              label: tempHash6[key],
              value: moment(tempHash6Data[key]*1000).format("YYYY-MM-DD HH:mm:ss") || '-',
            }
           }else if( key == 'remoteACResult'){ // 远程设置空调运行模式存在自动和手动模式
             if(dcvpRequest?.data?.body?.remoteAC.remoteACMode == '0'){ // 空调设置为自动模式
                return {
                  label: '空调(自动)运行模式设置结果',
                  value: tempHash6['remoteACResultAuto'][tempHash6Data['remoteACResultAuto']] || '-' 
                }
             }else if( dcvpRequest?.data?.body?.remoteAC.remoteACMode == '4') { //手动模式
              return {
                label: '空调(手动)运行模式设置结果',
                value: tempHash6['remoteACResultManual'][tempHash6Data['remoteACResultManual']] || '-'  
              }
             } else{
              return {
                label: '空调运行模式设置结果',
                value:  '-'  
              }
             }
           }
           else{
            return {
              label: tempHash6[key],
              value: tempHash6Data[key] || '-',
            }
           }
        }else{ // 真实数据中无该项数据则不展示
          // delete tempHash6[key];
          return null
        }
        })
        Object.keys(itemList6).forEach((key) =>{
          let value = itemList6[key];
          if(!value){
            delete itemList6[key];
          }
          return itemList6;
        })
        console.log('itemList6', itemList6);

        function errCodeTex(item){
          const {label,value} = item
          const errCodeArr = ['控制前天窗错误码','控制后天窗错误码','控制车门错误码','远控空调错误码','控制左前车窗错误码','控制右前车窗错误码','控制左后车窗错误码','控制右后车窗错误码',
        '控制快充电盖错误码','控制慢充电盖错误码','控制充电盖错误码','控制近光灯错误码','控制危险警报灯错误码','控制后备箱错误码','控制鸣笛错误码','控制哨兵模式错误码','控制引擎错误码','控制停止充电错误码','控制座椅1加热错误码',
      '控制座椅2加热错误码','控制座椅3加热错误码','控制座椅4加热错误码','控制座椅5加热错误码','控制座椅6加热错误码','控制座椅7加热错误码']
      if(errCodeArr.includes(label)){
          // if(label==='控制前天窗错误码' || label ==='控制后天窗错误码'){
            return mapList(value)
          }
          function mapList(arr=[]){
            const str = arr.map(e=>parseInt(e).toString(16).toUpperCase())
            return str.join(" ")
          }
          return value
        }
        return (
           <Card style={{ padding: '20px', minWidth: '1200px' }}>
                <Row justify="space-between">
                   <Col span={6}>
                    <Card bordered={false}>
                   <Timeline mode={"left"}>
                    <Timeline.Item color={color1} label={detailData?.requestTime} onClick={this.clc1} >
                        {<div style={{background: this.state.bgColor1}}>{"TSP-->连接平台下发请求"}</div> }
                    </Timeline.Item>
                    <Timeline.Item color={color2} label={detailData?.smsTime} onClick={this.clc2} >
                        {<div style={{background: this.state.bgColor2}}>{"连接平台-->TBOX下发唤醒短信"}</div> } 
                    </Timeline.Item>
                    <Timeline.Item color={color3} label={detailData?.dcvpRequest === null ?  '' : moment(dcvpRequest?.reqTime*1000).format("YYYY-MM-DD HH:mm:ss")}  onClick={this.clc3}>
                        {<div style={{background: this.state.bgColor3}}>{"连接平台-->TBOX下发控制指令"}</div> }
                    </Timeline.Item> 
                    <Timeline.Item color={color4} label={detailData?.tboxAck === null ?  '' : moment(tboxAck?.reqTime*1000).format("YYYY-MM-DD HH:mm:ss")} onClick={this.clc4}>
                        {<div style={{background: this.state.bgColor4}}>{"TBOX-->连接平台回复指令ACK"}</div> } 
                    </Timeline.Item>
                    <Timeline.Item color={color5} label={detailData?.dcvpAck === null ?  '' : moment(dcvpAck?.reqTime*1000).format("YYYY-MM-DD HH:mm:ss")} onClick={this.clc5}>
                        {<div style={{background: this.state.bgColor5}}>{"连接平台-->TSP回复响应结果"}</div> }
                    </Timeline.Item>
                    <Timeline.Item color={color6} label={detailData?.tboxResult === null ?  '' : moment(tboxResult?.reqTime*1000).format("YYYY-MM-DD HH:mm:ss")} onClick={this.clc6}>
                        {<div style={{background: this.state.bgColor6}}>{"TBOX-->连接平台回复执行结果"}</div> } 
                    </Timeline.Item>
                    <Timeline.Item color={color7} label={detailData?.dcvpResult === null ?  '' : moment(dcvpResult?.reqTime*1000).format("YYYY-MM-DD HH:mm:ss")}   onClick={this.clc7}>
                        {<div style={{background: this.state.bgColor7}}>{"连接平台--TSP回复执行结果"}</div> } 
                    </Timeline.Item>
                   </Timeline>
                   </Card>
                   </Col>
                   <Col span={18}>
                    {this.state.show1 && (
                       <Card bordered={false}>
                          <p style={{ margin: '10px 0',fontWeight: 'bold', fontSize: '16px' }}>TSP给连接平台下发请求</p>
                            <Descriptions bordered 
                            labelStyle={{ width: 145 }}
                            column={1}
                            >
                            <Descriptions.Item label="车辆VIN码">{detailData?.vin}</Descriptions.Item>
                            <Descriptions.Item label="控制类型">{getDicByKey(this.context.dicData, `ctlType`, detailData?.ctlType + '')}</Descriptions.Item>
                            <Descriptions.Item label="请求时间" >{detailData?.requestTime}</Descriptions.Item>
                            <Descriptions.Item label="请求参数" >
                                <pre>
                                {requestParam? requestParam : ''}
                                </pre>
                            </Descriptions.Item>
                            <Descriptions.Item label="流水号">{detailData?.serialNum} </Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                    {this.state.show2 && (
                       <Card bordered={false}>
                          <p style={{ margin: '10px 0',fontWeight: 'bold', fontSize: '16px' }}>下发唤醒短信</p>
                          {detailData?.smsTime && (
                              <div>
                            <Descriptions bordered 
                            labelStyle={{ width: 145 }}
                            column={1}
                            >
                             {/* {detailData?.smsTime && (
                              <div> */}
                            <Descriptions.Item label="VIN码">{detailData?.vin}</Descriptions.Item>
                            <Descriptions.Item label="SIM卡号">{detailData?.simNo}</Descriptions.Item>
                            <Descriptions.Item label="短信内容">{detailData?.smsContent}</Descriptions.Item>
                            <Descriptions.Item label="短信发送时间">{detailData?.smsTime}</Descriptions.Item>
                            <Descriptions.Item label="短信发送结果">
                              <pre>
                                {smsResult? smsResult : ''}
                                </pre>
                            </Descriptions.Item>
                            {/* </div>
                             )} */}
                           </Descriptions>
                            </div>
                             )}
                           </Card>
                           )}
                    {this.state.show3 && ( // 连接平台下发控制指令
                    <div>
                      <p style={{ margin: '10px 0',fontWeight: 'bold', fontSize: '16px' }}>连接平台下发控制指令</p>
                      {detailData?.dcvpRequest !== null && (
                      <div className={`desc-box ${'desc-flex'}`} >
                      {itemList1.map((item: any,index) => {
                          if(item['label'] === '原始报文'){
                             return ( 
                            <div className={`desc-item ${'flex-3'}`} key={index}>
                                 <div className="desc-item-fl">{item['label']}</div>
                                 <div className="desc-item-fr">{item['value']}</div>
                           </div>
                                )    
              
                         }else{
                            return (
                                <div className={`desc-item ${''}`}  key={index}>
                                   <div className="desc-item-fl">{item['label']}</div>
                                   <div className="desc-item-fr">{item['value']}</div>
                                </div>
                               );
                              }
                           })
                        }
                   </div>
                      )}
                   </div>
                           )}
                    {this.state.show4 && ( //TBOX回复指令ACK
                    <div>
                       <p style={{ margin: '10px 0',fontWeight: 'bold', fontSize: '16px' }}>TBOX回复指令ACK</p>
                       {detailData?.tboxAck !== null && (
                      <div className={`desc-box ${'desc-flex'}`} >
                      {
                        itemList4.map((item: any,index) => {
                          if(item['label'] === '原始报文'){
                             return ( 
                            <div className={`desc-item ${'flex-3'}`} key={index}>
                                 <div className="desc-item-fl">{item['label']}</div>
                                 <div className="desc-item-fr">{item['value']}</div>
                           </div>
                                )    
              
                         }else{
                            return (
                                <div className={`desc-item ${''}`}  key={index}>
                                   <div className="desc-item-fl">{item['label']}</div>
                                   <div className="desc-item-fr">{item['value']}</div>
                                </div>
                               );
                              }
                           })
                        }
                   </div>
                       )}
                   </div>
                      //  <Card bordered={false} >
                      //       <Descriptions bordered title="TBOX回复指令ACK" 
                      //        labelStyle={{wordBreak: "break-all", wordWrap: "break-word"}}
                      //        contentStyle={{ borderRight: '1px solid #f0f0f0', wordBreak: "break-all", wordWrap: "break-word"}}
                      //       >
                      //       {detailData?.tboxAck !== null && (itemList4.map((item,index) => {
                      //         if(item['label'] === '原始报文'){
                      //           return <Descriptions.Item key={index} label={item['label']}>
                      //             <Ellipsis length={20} tooltip>
                      //             {item['value']}
                      //             </Ellipsis>
                      //             </Descriptions.Item>;
                      //         }else{
                      //           return <Descriptions.Item key={index} label={item['label']}>{item['value']}</Descriptions.Item>;
                      //         }
                      //        })
                      //       )}
                      //      </Descriptions>
                      //      </Card>
                           )}
                    {this.state.show5 && (
                       <Card bordered={false}>
                          <p style={{ margin: '10px 0',fontWeight: 'bold', fontSize: '16px' }}>回复响应结果</p>
                          {detailData?.dcvpAck !== null && (
                            <div>
                            <Descriptions bordered 
                            // title="回复响应结果"
                             column={1}
                             labelStyle={{ width: 145 }}
                             >
                            <Descriptions.Item label="车辆VIN码">{dcvpAck?.vin? dcvpAck?.vin: ''}</Descriptions.Item>
                            <Descriptions.Item label="连接层返回参数">
                                <pre>
                                 {dcvpAckData === "{}" ? '' : dcvpAckData} 
                                </pre>
                            </Descriptions.Item>
                            <Descriptions.Item label="请求响应时间">{dcvpAck?.subTime ? dcvpAck?.subTime: ''}</Descriptions.Item>
                            <Descriptions.Item label="请求响应状态码">{dcvpAck?.data?.statusCode ? dcvpAck?.data?.statusCode: ''}</Descriptions.Item>
                            <Descriptions.Item label="请求返回提示信息">{dcvpAck?.data?.statusMessage ? dcvpAck?.data?.statusMessage: ''}</Descriptions.Item>
                            <Descriptions.Item label="流水号">{dcvpAck?.bsnIndex ? dcvpAck?.bsnIndex : ''}</Descriptions.Item>
                           </Descriptions>
                            </div>
                              )}
                           </Card>
                           )}
                     {this.state.show6 && (
                      <div>
                        <p style={{ margin: '10px 0',fontWeight: 'bold', fontSize: '16px' }}>连接平台回复执行结果</p>
                        {detailData?.tboxResult !== null && (
                        <div className={`desc-box ${'desc-flex'}`} >
                            {itemList6.map((item: any,index) => {
                                if(item['label'] === '原始报文'){
                                   return ( 
                                  <div className={`desc-item ${'flex-3'}`} key={index}>
                                       <div className="desc-item-fl">{item['label']}</div>
                                       <div className="desc-item-fr">{item['value']}</div>
                                 </div>
                                      )    
                    
                               }else{
                                  return (
                                      <div className={`desc-item ${''}`}  key={index}>
                                         <div className="desc-item-fl">{item['label']}</div>
                                         <div className="desc-item-fr">{errCodeTex(item)}</div>
                                      </div>
                                     );
                                    }
                                 })
                              }
                         </div>
                        )}
                         </div>
                      //  <Card bordered={false} >
                      //       <Descriptions title="TBOX回复执行结果" bordered 
                      //       labelStyle={{wordBreak: "break-all", wordWrap: "break-word"}}
                      //       contentStyle={{ borderRight: '1px solid #f0f0f0', wordBreak: "break-all", wordWrap: "break-word"}}
                      //      >
                      //       {detailData?.tboxResult !== null && (itemList6.map((item,index) => {
                      //       if(item['label'] === '原始报文'){
                      //         return <Descriptions.Item key={index} label={item['label']}>
                      //           <Ellipsis length={20} tooltip>
                      //           {item['value']}
                      //           </Ellipsis>
                      //           </Descriptions.Item>;
                      //       }else{
                      //         return <Descriptions.Item key={index} label={item['label']}>{item['value']}</Descriptions.Item>;
                      //       }
                      //        })
                      //       )}
                      //      </Descriptions>
                      //      </Card>
                           )}
                     {this.state.show7 && (
                       <Card bordered={false} >
                         <p style={{ margin: '10px 0',fontWeight: 'bold', fontSize: '16px' }}>连接平台回复远控结果</p>
                         {detailData?.dcvpResult !== null && (
                            <div>
                            <Descriptions bordered 
                            // title="连接平台回复远控结果"
                            column={1}
                            labelStyle={{ width: 145 }}
                             >
                            <Descriptions.Item label="车辆VIN码">{dcvpResult?.vin ? dcvpResult?.vin : ''}</Descriptions.Item>
                            <Descriptions.Item label="回复远控结果时间">{dcvpResult?.subTime ? dcvpResult?.subTime : ''}</Descriptions.Item>
                            <Descriptions.Item label="回复远控结果">
                               <pre>
                                {dcvpResultData === "{}" ? '' : dcvpResultData}
                                </pre>
                            </Descriptions.Item>
                            <Descriptions.Item label="流水号">{dcvpResult?.bsnIndex ? dcvpResult?.bsnIndex : ''}</Descriptions.Item>
                            </Descriptions>
                            </div>
                              )}
                           </Card>
                           )}
                   </Col>
                </Row>
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button
                  type="primary"
                  key="back"
                  onClick={this.goBack}
                >
                  关闭
                </Button>
              </div>
            </Card>
        );
    }
}
export default connect(mapStateToProps)(RemoteControllerLogQueryDetail);